<template>
  <div class="container">
    <!-- 计数器 -->
    <div class="but">
      <h3>计数器</h3>
      <h3>{{ $store.getters.showNum }}</h3>
      <!-- <p>-----------------------------------</p> -->
      <!-- 增加 -->
      <div class="but_1">
        <el-button @click="add">+1</el-button>
        <el-button @click="addN">+N</el-button>
        <el-button @click="add3">+1 Ansync</el-button>
        <el-button @click="add3N">+N Ansync</el-button>
      </div>
      <!-- <p>-----------------------------------</p> -->
      <!-- 减少 -->
      <div class="but_1">
        <el-button @click="sub">-1</el-button>
        <el-button @click="subN">-N</el-button>
        <el-button @click="sub3">-1 Ansync</el-button>
        <el-button @click="sub3N">-N Ansync</el-button>
      </div>
    </div>

    <div style="height: 50px"></div>

    <!-- 事物清单 -->
    <div class="list">
      <h3>事物清单</h3>
      <div style="display: flex">
        <el-input
          placeholder="请输入任务"
          v-model="inputValue"
          @change="handleInputChange"
          style="width: 340px"
        ></el-input>
        <el-button
          type="primary"
          @click="addItemToList"
          style="margin-left: 10px"
          >添加事项</el-button
        >
      </div>
      <div>
        <el-checkbox-group v-model="list" class="list_box">
          <div v-for="item in infolist" :key="item.id" class="list_item">
            <el-checkbox
              label="item.done"
              @change="handleCheckBox(item.id)"
              ref="checkbox"
              >{{ item.info }}</el-checkbox
            >
            <el-link type="primary" @click="removeItemById(item.id)"
              >删除</el-link
            >
          </div>
        </el-checkbox-group>
      </div>
      <div class="footer">
        <span class="footer_text">{{ unDoneLength }}条剩余</span>
        <el-button-group>
          <el-button
            :type="viewKey === 'all' ? 'primary' : 'default'"
            @click="changeListButton('all')"
            >全部</el-button
          >
          <el-button
            :type="viewKey === 'undone' ? 'primary' : 'default'"
            @click="changeListButton('undone')"
            >未完成</el-button
          >
          <el-button
            :type="viewKey === 'done' ? 'primary' : 'default'"
            @click="changeListButton('done')"
            >已完成</el-button
          >
        </el-button-group>
        <el-link type="primary" class="footer_text" @click="clean"
          >清除已完成</el-link
        >
      </div>
      <div>
        <el-checkbox v-for="item in key" :key="item.id" :label="item.info">{{
          item.info
        }}</el-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters } from 'vuex'
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      key: [{ id: 1, info: '123123测试', done: true }]
    }
  },
  created() {
    this.$store.dispatch('list/getList')
  },
  computed: {
    ...mapState({
      list: (state) => state.list.list,
      inputValue: (state) => state.list.inputValue,
      viewKey: (state) => state.list.viewKey
    }),
    ...mapGetters(['unDoneLength', 'infolist'])
  },
  methods: {
    ...mapMutations(['add', 'addN']),
    add() {
      this.$store.commit('count/add')
      // this.add()
    },
    addN(N) {
      //  commit 的作用，就是调用 某个 mutation 函数
      this.$store.commit('count/addN', 3)
      // this.addN(3)
    },
    //  异步地让 count 自增+1
    add3() {
      //  这里的 dispatch 函数，专门用来触发 action
      this.$store.dispatch('count/addAsync')
    },
    add3N() {
      this.$store.dispatch('count/addNAsync', 3)
    },
    sub() {
      this.$store.commit('count/sub')
    },
    subN() {
      this.$store.commit('count/subN', 3)
    },
    sub3() {
      this.$store.dispatch('count/subAsync')
    },
    sub3N() {
      this.$store.dispatch('count/subNAsync', 3)
    },

    //  事物清单
    handleInputChange(e) {
      console.log(e.target.value)
      this.$store.commit('list/setInputValue', e.target.value)
    },
    //  更改状态
    handleCheckBox(id) {
      // 通过 e.target.checked 可以接受到最新的选中状态
      // console.log(e, '111')
      // console.log(e.target.checked)
      console.log(id)
      // const checked = this.$refs.checkbox[id]
      // console.log(checked, '111')
      // console.log(checked.IsRevoked, '222')
      const done = !this.$store.state.list.list[id].done
      console.log(done, '333')
      const param = {
        id: id,
        status: done
      }
      this.$store.commit('list/changeStatus', param)
    },
    // 向列表中新增 item 项
    addItemToList() {
      if (this.inputValue.trim().length <= 0) {
        return ElMessage({
          message: '请输入内容',
          type: 'warning'
        })
      }
      this.$store.commit('list/addItem')
    },
    //  根据id删除对应的任务事项
    removeItemById(id) {
      this.$store.commit('list/removeItem', id)
    },
    //  清除已完成的任务
    clean() {
      this.$store.commit('list/cleanDone')
    },
    //  根据状态修改页面上展示的列表数据
    changeListButton(key) {
      // console.log(key)
      this.$store.commit('list/changeViewKey', key)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 60px;
  padding: 10px;
  // display: flex;
  // flex: wrap;
  // justify-content: center;

  // 计数器
  .but {
    button {
      width: 100px;
    }
    .but_1 {
      margin: 10px 0;
    }
  }

  //事物清单
  .list {
    .list_box {
      width: 340px;
      border: 1px solid rgba(220, 223, 230);
      margin-top: 5px;
      padding: 0 5px;
      .list_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .footer {
      width: 340px;
      margin-top: 5px;
      padding: 1px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid rgba(220, 223, 230);
      .footer_text {
        font-size: 12px;
      }
    }
  }
}
</style>
